<template>
  <div class="section-header text-center">
    <h6>合作的企业超过  100+</h6>
  </div>
  <div class="partner__wrapper">
    <SwiperSlide
      :dataList="partnerThree"
      :breakpoints="breakpoints"
      :loop="true"
      :autoplay="autoplay"
      :speed="speed"
      :pagination="pagination"
      :grabCursor="grabCursor"
    >
      <template #content="{ item }">
        <div class="partner__item">
          <div class="partner__item-inner">
            <img :src="item.img" alt="partner logo" />
          </div>
        </div>
      </template>
    </SwiperSlide>
  </div>
</template>

<script>
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
export default {
  components: { SwiperSlide },
  props: {
    partnerThree: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      spaceBetween: 10,
      grabCursor: true,
      loop: true,
      slidesPerView: 2,
      breakpoints: {
        320: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 3,
        },
        992: {
          slidesPerView: 4,
          spaceBetween: 15,
        },
        1200: {
          slidesPerView: 5,
          spaceBetween: 25,
        },
      },
      autoplay: {
        delay: 1,
        disableOnInteraction: true,
      },
      speed: 3000,
      pagination: false,
    };
  },
};
</script>